<template>
  <div class="share-sentence-wrapper">
    <div
        class="share-sentence transition" @click.stop
        @contextmenu.stop.prevent="handleRightClick"
    >
      <div class="content">「 {{state.yiyan.hitokoto}} 」</div>
      <div class="author transition">
        —— {{state.yiyan.from_who}} / {{state.yiyan.from}}
      </div>
      <el-popover
          ref="popoverRef"
          placement="top" trigger="click" :hide-after="0" :teleported="false"
      >
        <template #reference>
          <div class="more-icon transition" @contextmenu.stop.prevent>
            <van-icon name="ellipsis" size="25" />
          </div>
        </template>
        <template #default>
          <div class="more-menu" @contextmenu.stop.prevent>
            <div class="more-menu-box">
              <!--suppress VueUnrecognizedDirective -->
              <div
                  class="menu-item transition"
                  v-clipboard:copy="copyContent"
                  v-clipboard:success="handleCopy"
              >
                <div class="icon">
                  <i class="iconfont icon-fuzhi"></i>
                </div>
                <span>复制</span>
              </div>
              <div class="menu-item transition" @click="handleSearch">
                <div class="icon">
                  <i class="iconfont icon-sousuo"></i>
                </div>
                <span>搜索</span>
              </div>
            </div>
          </div>
        </template>
      </el-popover>
    </div>
  </div>
</template>

<script setup>
import axios from "axios";
import {ref, reactive, onMounted, computed} from "vue";
import {useMenuStore} from "@/stores/menu";

const popoverRef = ref()
const useStore = useMenuStore()

const state = reactive({
  yiyan: {}
})

const copyContent = computed(() => {
  return `${state.yiyan.hitokoto}—— ${state.yiyan.from_who} / ${state.yiyan.from}`
})

onMounted(() => {
  getSentence()
})

/**
 * 获取一言接口数据
 */
const getSentence = () => {
  axios
      .get("https://v1.hitokoto.cn/?c=d&c=i&encode=json")
      .then(({data: res}) => {
        state.yiyan = res
        // console.log(state.yiyan)
      })
      .catch((error) => {
        console.log(error)
      })
}

/**
 * 处理右键事件
 */
const handleRightClick = () => {
  getSentence()
}

/**
 * 复制事件
 */
const handleCopy = () => {
  popoverRef.value.hide()
  ElMessage({
    showClose: true,
    message: '复制成功',
    type: "success",
  })
}

/**
 * 搜索事件
 */
const handleSearch = () => {
  popoverRef.value.hide()
  window.open(`https://www.baidu.com/s?wd=${state.yiyan.hitokoto}`)
}
</script>

<style lang="less">
.share-sentence-wrapper {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 2%;
  z-index: 5;

  .share-sentence {
    margin: 10px auto 0;
    width: min(520px, 90%);
    height: 65px;
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    text-align: center;
    cursor: default;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;

    .content {
      text-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
    }

    .author {
      color: transparent;
      margin-top: 6px;
    }

    .more-icon {
      color: transparent;
      position: absolute;
      top: 6px;
      right: 6px;
      padding: 0 8px;
      border-radius: 8px;
      cursor: pointer;

      &:hover {
        background-color: rgba(255, 255, 255, .1);
      }
    }

    &:hover {
      background-color: rgba(255, 255, 255, .2);

      .author, .more-icon {
        color: white;
      }
    }
  }

  .menu-item {
    border-radius: 4px;
    padding: 0 8px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    cursor: pointer;

    &:hover {
      background-color: rgba(0, 0, 0, .05);
    }

    .icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 25px;
      height: 25px;
      margin-right: 6px;
    }
  }

  .el-popover.el-popper {
    min-width: 0;
    width: auto!important;
  }
}
</style>